<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 产线数据 -->
      <el-col :span="4" :xs="24">
        <!-- <el-input v-model="lineName" placeholder="请输入产线名称" clearable size="small" prefix-icon="el-icon-search"
          style="margin-bottom: 20px" /> -->
        <el-tree ref="tree"  :data="lineDate" :props="defaultProps" node-key="id" highlight-current @node-click="lineClick" />
      </el-col>
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
          label-width="68px">
          <!-- <el-form-item label="产线编号" prop="lineNo">
            <el-input v-model="queryParams.lineNo" placeholder="请输入产线编号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item> -->
          <el-form-item label="工序号" prop="processNo">
            <el-input v-model="queryParams.processNo" placeholder="请输入工序号" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="工序名称" prop="processName">
            <el-input v-model="queryParams.processName" placeholder="请输入工序名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="processList">
          <el-table-column type="index" label="序号" />
          <!-- <el-table-column label="产线编号" width="150" align="center" prop="lineNo" /> -->
          <el-table-column label="工序号" align="center" prop="processNo" />
          <el-table-column label="工序名称" align="center" prop="processName" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listProcess, listProcessQuery,testlist } from "@/api/zndd/process/process";
import { listAllDetails } from "@/api/zndd/line/details";
import { listAllSet } from "@/api/zndd/line/set";

export default {
  name: "ProcessLine",
  data() {
    return {
      //二级产线数据
      lineDate: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //二级产线全部数据
      detailsList:[],
      //三级产线全部数据
      lineSetList:[],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      //搜索条件
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        lineNo: null,
        processNo: null,
        processName: null,
        lineNos:[]
      },
      // 工序信息表格数据
      processList: [],
    };
  },
  created() {
    this.getLineDetalisList();
  },
  methods: {
    //查询二级产线信息
    getLineDetalisList(){
      listAllDetails().then(response => {
        this.detailsList = response.rows;
        this.getLineSetList();
      });
    },
    //查询三级产线信息
    getLineSetList(){
      listAllSet().then(response => {
        var list = [];
        this.detailsList.forEach(details => {
          var sets = [];
          response.rows.forEach(row => {
            if(details.id == row.lineId){
              sets.push({
                label:row.threeLineName,
                value:row.lineNo,
                lineId:row.lineId,
              });
            }
          });
          list.push({
            id:details.id,
            label:details.sonLineName,
            value:details.lineNo,
            children:sets
          });
        });
        this.lineDate = list;
        this.$nextTick(()=>{
          this.$refs.tree.setCurrentKey(this.lineDate[0].id);
        })
        this.lineClick(this.lineDate[0]);
      });
    },
    //树型二级产线点击事件
    lineClick(data) {
      this.queryParams.lineNo = null;
      this.queryParams.lineNos = [];
      if(data.children != undefined && data.children.length > 0){
        var lns = [];
        data.children.forEach(row => {
          if(row.value != undefined){
              lns.push(row.value);
            }
        });
        if(lns.length != 0){
          this.queryParams.lineNos = lns;
        }
      }else{
        this.queryParams.lineNo = data.value;
      }
      if(this.queryParams.lineNo == null && this.queryParams.lineNos.length == 0){
        this.loading = false;
      }else{
        this.getList();
      }
    },
    /** 查询工序信息列表 */
    getList() {
      this.loading = true;
      listProcessQuery(this.queryParams).then(response => {
        this.processList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>
<style lang="css" scoped>
::v-deep .el-tree-node__content:hover{
  background-color: #409EFF;
  color: #ffffff;
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
  background-color: #409EFF;
  color: #ffffff;
}
</style>